<template>
    <view>
		<view class="box2" hover-class="boxHover" hover-stay-time="100">		
			<view class="inner" hover-class="innerHover" hover-stay-time="100" hover-stop-propagation>内部元素</view>
		</view>
		<navigator url="/pages/demo2/demo2">
			<image src="../../static/pic4.jpg" mode=""></image>
		</navigator>
		<view>----</view>
		
		<view style="margin: 25px 0;">
			<text selectable>text文本标签</text>
		</view>
		
		<view>
			<navigator url="/pages/demo1/demo1" open-type="reLaunch">跳转到demo1</navigator>
		</view>
		
		<scroll-view  scroll-y  class="scrollView">
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view> 
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
			<view class="box">scroll子元素</view>
		</scroll-view>
	</view>
</template>


<script setup>

</script>


<style lang="scss" scoped>
.box2{
	width: 100px;
	height: 100px;
	margin: 15px 10px;
	border: 1px solid lightgray;
}	

.boxHover{
	border: 1px solid lightblue;
	background: lightblue;
	color: #fff;
}	

.inner{
	width: 50px;
	height: 50px;
	border: 1px solid darkred;
	
}
.innerHover{
	border: 1px solid lightblue;
	background: blue;
	color: #fff;
}
		
.scrollView{
	width: 80%;
	height: 220px;
	border:1px solid red;
	white-space: nowrap;
	.box{
		width: 100px;
		height: 100px;
		background: green;
		// display: inline-block;
		display: block;
		margin:5px;
	}
}
</style>
